<script setup>
import { ref } from 'vue'
import { getCouponList, receiveMyCoupon } from '@/api/coupon'
import CouponItem from '@/components/CouponItem.vue'

const list = ref([])

const receiveCoupon = async (couponId) => {
  await receiveMyCoupon({ couponId })
  const { data } = await getCouponList()
  list.value = data.list
}

const init = async () => {
  const { data } = await getCouponList()
  list.value = data.list
}
init()
</script>

<template>
  <div class="coupon-container">
    <van-nav-bar
      title="领券中心"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <div class="list">
      <CouponItem
        v-for="item in list"
        :key="item.coupon_id"
        :item="item"
        :class="{ blue: !item.is_receive, gray: item.is_receive }"
      >
        <span v-if="item.is_receive" class="received">{{
          item.state.text
        }}</span>
        <span v-else class="receive-btn" @click="receiveCoupon(item.coupon_id)"
          >立即领取</span
        >
      </CouponItem>
    </div>
  </div>
</template>

<style lang="less" scoped>
.coupon-container {
  padding-top: 46px;
}

.van-nav-bar {
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

  ::v-deep .van-icon-arrow-left {
    color: black;
  }
}

.header {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  background-color: white;

  span {
    padding: 5px;
    font-size: 15px;
    color: rgb(48, 49, 51);
  }

  .activated {
    font-weight: bold;
    color: rgb(250, 34, 9);
    border-bottom: 3px solid rgb(250, 34, 9);
  }
}

.list {
  background-color: white;
}

.blue {
  background: linear-gradient(-125deg, #57bdbf, #2f9de2);
}

.gray {
  background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
}

.received {
  margin-right: 10px;
}

.receive-btn {
  margin-right: 10px;
  border: 1px solid white;
  border-radius: 20px;
  padding: 3px 5px;
}
</style>
